<template>
  <div class="adress-box">
    <div class="adress-header flex-box">
      <div class="adress-header-left flex-box">
        <svg class="icon" aria-hidden="true" @click="routeBack">
          <use xlink:href="#icon-gb-xiazai6"></use>
        </svg>
        <p>新建收货地址</p>
      </div>
    </div>
    <div class="adressSetMain">
      <ul>
        <li class="flex-box">
          <input type="text" placeholder="收货人姓名" :value="lists.name?lists.name:''">
        </li>
        <li class="flex-box">
          <input type="text" placeholder="手机号码" :value="lists.phone?lists.phone:''">
        </li>
        <li class="flex-box">
          <input type="text" placeholder="邮箱">
        </li>
        <li class="flex-box" @click="showPick">
          <p>省、市、区</p> 
          <div>
            <span v-if="areaPick">{{areaPick.length>18?areaPick.slice(0,18)+'...':areaPick}}</span>
            <div v-else><span v-if="lists.adress">{{lists.adress | reAdress}}</span></div>
            <svg class="icon" aria-hidden="true" v-if="!lists.adress" v-show="!areaPick">
              <use xlink:href="#icon-gb-jiantou"></use>
            </svg>
          </div>
        </li>
        <li class="flex-box">
          <input type="text" placeholder="详细地址" :value="lists.adress?lists.adress.split(' ')[3]:''">
        </li>
        <li class="flex-box">
          <p>设为默认地址</p>
          <input type="checkbox" />
        </li>
      </ul>
    </div>
    <div class="concern-btn">
      <div class="loading-box flex-box">
        <p v-show="!loadingShow" @click="saveAdress">
          保存
        </p>
        <div class='sk-fading-circle' v-show="loadingShow">
          <div class='sk-circle sk-circle-1'></div>
          <div class='sk-circle sk-circle-2'></div>
          <div class='sk-circle sk-circle-3'></div>
          <div class='sk-circle sk-circle-4'></div>
          <div class='sk-circle sk-circle-5'></div>
          <div class='sk-circle sk-circle-6'></div>
          <div class='sk-circle sk-circle-7'></div>
          <div class='sk-circle sk-circle-8'></div>
          <div class='sk-circle sk-circle-9'></div>
          <div class='sk-circle sk-circle-10'></div>
          <div class='sk-circle sk-circle-11'></div>
          <div class='sk-circle sk-circle-12'></div>
        </div>
      </div>
    </div>
    <awesome-picker
      ref="picker"
      :textTitle="picker.textTitle"
      :data="picker.data"
      :anchor="picker.anchor"
      @confirm="handlePickerConfirm">
    </awesome-picker>
  </div>
</template>

<script>
import Vue from 'vue'
import areaData from 'vue-awesome-picker/src/area.js'
import '@/assets/css/gb-index.scss'
import AwesomePicker from 'vue-awesome-picker'
import qs from 'qs'
Vue.use(qs)
Vue.use(AwesomePicker)
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      lists: '',
      areaPick: '',
      loadingShow: false,
      picker: {
        anchor: [],
        textTitle: '',
        data: areaData
      }
    }
  },
  components: {},
  computed: {},
  filters: {
    reAdress: function(value) {
      return value.split(' ')[0] + ' ' + value.split(' ')[1] + ' ' + value.split(' ')[2]
    }
  },
  methods: {
    routeBack() {
      this.$router.go(-1)
    },
    showPick() {
      this.$refs.picker.show()
    },
    handlePickerConfirm(v) {
      console.log(v)
      this.areaPick = v[0].value + ' ' + v[1].value + ' ' + v[2].value
    },
    saveAdress() {
      this.loadingShow = true
      setTimeout(() => {
        this.loadingShow = false
        this.$router.go(-1)
      }, 2000)
    }
  },
  mounted() {
    this.lists = JSON.parse(this.$route.params.item)
    console.log(this.lists)
  }
}
</script>
<style scoped lang="scss">
.adress-box {
  width: 100%;
  .adress-header {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    box-sizing: border-box;
    justify-content: space-between;
    top: 0;
    left: 0;
    background: #f0f0f0;
    font-size: 16px;
    &::after {
      width: 100%;
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      border-bottom: 1px solid #bbb;
      transform: scaleY(0.2);
      transform-origin: left bottom;
    }
    svg {
      font-size: 20px;
      color: #333;
    }
    .adress-header-left {
      svg {
        font-size: 16px;
      }
      p {
        font-size: 16px;
        margin-left: 6px;
        color: #333;
        position: relative;
        top: 1px;
      }
    }
  }
  .adressSetMain {
    width: 100%;
    font-size: 14px;
    ul {
      display: block;
      box-sizing: border-box;
      padding: 0 15px;
      overflow: hidden;
      li {
        width: 100%;
        float: left;
        height: 48px;
        justify-content: space-between;
        position: relative;
        input[type='text'] {
          border: none;
          width: 100%;
          height: 32px;
          font-size: 14px;
        }
        span {
          width: 260px;
          text-align: right;
          display: inline-block;
        }
        svg {
          font-size: 20px;
        }
        &::after {
          position: absolute;
          content: '';
          width: 100%;
          left: 0;
          bottom: 0;
          border-bottom: 1px solid #ddd;
          transform: scaleY(0.333);
          transform-origin: left bottom;
        }
      }
    }
  }
  .concern-btn {
    width: 100%;
    color: #fff;
    font-size: 16px;
    height: 40px;
    margin-top: 32px;
    padding: 0 15px;
    box-sizing: border-box;
    p {
      width: 100%;
      height: 100%;
      line-height: 40px;
    }
    .loading-box {
      width: 100%;
      height: 100%;
      background: #ff4242;
      .sk-fading-circle {
        margin-top: 7px;
        transform: scale(0.4);
        transform-origin: top center;
      }
    }
  }
}
input[type='checkbox'] {
  /*同样，首先去除浏览器默认样式*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*编辑我们自己的样式*/
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  width: 56px;
  height: 28px;
  border-radius: 20px;
  transition: all ease-in-out 300ms;
  outline: none;
  cursor: pointer;
  transform: scale(0.8);
  transform-origin: right center;
}
input[type='checkbox']:after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  display: block;
  width: 22px;
  height: 22px;
  background: #ccc;
  color: #fff;
  text-align: center;
  line-height: 22px;
  /*增加动画*/
  transition: all ease-in-out 300ms;
  border-radius: 20px;
  font-size: 12px;
}
input[type='checkbox']:checked {
  background: #00bfff;
  border: 1px solid #00bfff;
}
input[type='checkbox']:checked:after {
  content: '';
  left: 30px;
  background: #fff;
  color: #00bfff;
}
.sk-fading-circle {
  width: 4em;
  height: 4em;
  position: relative;
  margin: auto;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
  animation: sk-fading-circle-delay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle-2 {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.sk-fading-circle .sk-circle-3 {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.sk-fading-circle .sk-circle-4 {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sk-fading-circle .sk-circle-5 {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.sk-fading-circle .sk-circle-6 {
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
}
.sk-fading-circle .sk-circle-7 {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.sk-fading-circle .sk-circle-8 {
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
}
.sk-fading-circle .sk-circle-9 {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}
.sk-fading-circle .sk-circle-10 {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.sk-fading-circle .sk-circle-11 {
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
}
.sk-fading-circle .sk-circle-12 {
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
}
.sk-fading-circle .sk-circle-2:before {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-fading-circle .sk-circle-3:before {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-fading-circle .sk-circle-4:before {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-fading-circle .sk-circle-5:before {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.sk-fading-circle .sk-circle-6:before {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.sk-fading-circle .sk-circle-7:before {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.sk-fading-circle .sk-circle-8:before {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle-9:before {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle-10:before {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle-11:before {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle-12:before {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes sk-fading-circle-delay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}

@keyframes sk-fading-circle-delay {
  0%,
  39%,
  100% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
</style>
